<template>
  <el-scrollbar style="height: 100%">
    <div>
      <div>
        <el-form
          :model="queryParams"
          style="margin-left: 20px"
          ref="queryForm"
          :inline="true"
          v-show="showSearch"
          label-width="68px"
        >
          <el-form-item>
            <el-button size="mini" @click="dayDataSource">今天</el-button>
            <el-button size="mini" @click="yesDataSource">昨天</el-button>
            <el-button size="mini" @click="workDataSource">本周</el-button>
            <el-button size="mini" @click="monthDataSource">本月</el-button>
            <el-date-picker
              style="margin: 0px 10px"
              size="mini"
              v-model="dateRangeCreatedDate"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            ></el-date-picker>
            <el-button type="primary" size="mini" @click="queryDataSource"
              >查询</el-button
            >
          </el-form-item>
        </el-form>
        <span style="color: #ff9955; font-size: 25px">|</span>
        <span style="font-size: 20px">数据概览</span>
        <el-row :gutter="10" class="panel-group">
          <el-col :xs="12" :sm="12" :lg="6">
            <div class="flex xiaoliang">
              <div style="line-height: 62px; font-size: 44px">
                {{ form.zongliters }}(L/kg)
              </div>
              <div style="font-size: 28px">总销量</div>
            </div>
          </el-col>
          <el-col :xs="12" :sm="12" :lg="6">
            <div class="flex xiaoe">
              <div style="line-height: 62px; font-size: 44px">
                {{ form.zongAmt }}元
              </div>
              <div style="font-size: 28px">总金额</div>
            </div>
          </el-col>
          <el-col :xs="12" :sm="12" :lg="6">
            <div class="flex xiaoliang">
              <div style="line-height: 62px; font-size: 44px">
                {{ form.qyamt }}元
              </div>
              <div style="font-size: 28px">汽油</div>
            </div>
          </el-col>
          <el-col :xs="12" :sm="12" :lg="6">
            <div class="flex xiaoliang">
              <div style="line-height: 62px; font-size: 44px">
                {{ form.cyamt }}元
              </div>
              <div style="font-size: 28px">柴油</div>
            </div>
          </el-col>
        </el-row>
      </div>
      <div style="width: 100%; height: 360px; background: #ffffff">
        <span style="color: #ff9955; font-size: 25px">|</span>
        <span style="font-size: 20px">销售情况(本月)</span>
        <div
          ref="myChart"
          style="width: 100%; height: 350px; margin: 0px 25px"
        ></div>
      </div>
      <div style="width: 100%; height: 181px">
        <span style="color: #ff9955; font-size: 25px">|</span>
        <span style="font-size: 20px">详情：</span>
        <el-table v-loading="loading" :data="dayReportList">
          <el-table-column label="日期" align="left" prop="payDate">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.createdDate, "{y}-{m}-{d}") }}</span>
            </template>
          </el-table-column>
          <el-table-column label="销额" align="left" prop="amt" />
          <el-table-column
            label="销量（L）"
            align="left"
            prop="orderLiters"
            v-if="false"
          />
          <el-table-column label="汽油" align="left" prop="qyAmt" />
          <el-table-column label="柴油" align="left" prop="cyAmt" />
          <el-table-column label="订单数" align="left" prop="orderNo" />
          <el-table-column
            label="应收（元）"
            align="left"
            prop="receivableAmt"
          />
          <el-table-column label="实收（元）" align="left" prop="amt" />
          <el-table-column
            label="操作"
            align="left"
            class-name="small-padding fixed-width"
          >
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-edit"
                @click="handleLook(scope.row)"
                >详情</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="dayReportDetail"
        />
      </div>
      <el-dialog
        :title="title"
        width="800px"
        :visible.sync="open"
        append-to-body
      >
        <el-table
          v-loading="loading"
          :data="dayReportDetailsList"
          show-summary
          :summary-method="getTotal"
        >
          <el-table-column label="油品" align="left" prop="oilName" />
          <el-table-column label="油枪号" align="left" prop="oilGun" />
          <el-table-column label="销量（L）" align="left" prop="orderLiters" />
          <el-table-column
            label="应收金额（元）"
            align="left"
            prop="receivableAmt"
          />
          <el-table-column label="实收金额（元）" align="left" prop="amt" />
          <el-table-column
            label="优惠金额（元）"
            align="left"
            prop="discountAmt"
          />
          <el-table-column
            label="优惠劵"
            align="left"
            prop="discountCouponAmt"
            v-if="false"
          />
          <el-table-column
            label="会员支付"
            align="left"
            prop="menberAmt"
            v-if="false"
          />
          <el-table-column
            label="微信支付"
            align="left"
            prop="wxAmt"
            v-if="false"
          />
          <el-table-column
            label="支付宝支付"
            align="left"
            prop="zfbAmt"
            v-if="false"
          />
          <el-table-column label="会员充值" align="left" prop v-if="false" />
          <el-table-column label="积分消费" align="left" prop v-if="false" />
        </el-table>
        <!-- <pagination
          v-show="total1>0"
          :total="total1"
          :page.sync="queryInfo.pageNum"
          :limit.sync="queryInfo.pageSize"
          @pagination="getLookOrder"
        /> -->
      </el-dialog>
    </div>
  </el-scrollbar>
</template>

<script>
import echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
import {
  listSum,
  listOilType,
  listDayReport,
  selectDayReportDetail,
  getDetails,
  listXdata,
  listQydata92,
  listQydata95,
  listQydata98,
  listQydata0,
  listQydata10,
  listQydata20,
} from "@/api/dataSource/saleReport";

export default {
  name: "sourceO",
  data() {
    return {
      charts: null,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      total1: 0,
      // 优惠劵管理表格数据
      couponList: [],
      dayReportDetailsList: [],
      dateRangeCreatedDate: [],
      //x轴数据
      xdata: [],
      //92#汽油数据
      qydata92: [],
      //95#汽油数据
      qydata95: [],
      //98#汽油数据
      qydata98: [],
      //0#柴油数据
      cydata0: [],
      //-10#柴油数据
      cydata10: [],
      //-20#柴油数据
      cydata20: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        createdDate: null,
        stationId: null,
        stationName: null,
        beginTime: null,
        endTime: null,
        payDate: null,
        pageNum: 1,
        pageSize: 10,
        status: "1",
      },
      // 查询参数
      queryInfo: {
        pageNum: 1,
        pageSize: 10,
        payDate: null,
        status: null,
        createdDate: null,
        beginTime: null,
        endTime: null,
        orderType: null,
        stationId: null,
      },
      //日报数据
      dayReportList: [],
      // 表单参数
      form: {
        zongAmt: 0,
        zongliters: 0,
        qyamt: 0,
        cyamt: 0,
      },
      // 表单校验
      rules: {},
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.queryParams.beginTime = this.getMonthDate();
      this.queryParams.endTime = this.getEndFormatDate(new Date());
      this.queryParams.stationId = this.$store.selectDeptId;
      if (
        this.queryParams.stationId == null ||
        this.queryParams.stationId == ""
      ) {
        this.queryParams.stationId = this.$store.state.user.deptId;
      }
      setTimeout(() => {
        this.initChart();
      }, 1000);
    });
  },
  created() {
    this.dayDataSource();
    //获取折线图的数据
    this.reset();
    this.queryParams.beginTime = this.getMonthDate();
    this.queryParams.endTime = this.getEndFormatDate(new Date());
    this.queryParams.stationId = this.$store.selectDeptId;
    if (
      this.queryParams.stationId == null ||
      this.queryParams.stationId == ""
    ) {
      this.queryParams.stationId = this.$store.state.user.deptId;
    }
    this.getDatas();
  },
  methods: {
    initChart() {
      // 初始化echarts
      this.charts = echarts.init(this.$refs.myChart, "macarons");
      this.charts.setOption(
        {
          xAxis: {
            data: this.xdata,
            boundaryGap: false,
            axisTick: {
              show: false,
            },
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "cross",
            },
            padding: [5, 10],
          },
          yAxis: {
            axisTick: {
              show: false,
            },
            name: "元",
          },
          legend: {
            data: ["92#", "95#", "98#", "0#", "-10#", "-20#"],
          },
          animation: false,
          series: [
            {
              name: "92#",
              itemStyle: {
                normal: {
                  color: "#FF005A",
                  lineStyle: {
                    color: "#FF005A",
                    width: 2,
                  },
                },
              },
              smooth: true,
              type: "line",
              data: this.qydata92,
            },
            {
              name: "95#",
              smooth: true,
              type: "line",
              itemStyle: {
                normal: {
                  color: "#3888fa",
                  lineStyle: {
                    color: "#3888fa",
                    width: 2,
                  },
                },
              },
              data: this.qydata95,
            },
            {
              name: "98#",
              smooth: true,
              type: "line",
              itemStyle: {
                normal: {
                  color: "#ffff00",
                  lineStyle: {
                    color: "#ffff00",
                    width: 2,
                  },
                },
              },
              data: this.qydata98,
            },
            {
              name: "0#",
              smooth: true,
              type: "line",
              itemStyle: {
                normal: {
                  color: "#00ff00",
                  lineStyle: {
                    color: "#00ff00",
                    width: 2,
                  },
                },
              },
              data: this.cydata0,
            },
            {
              name: "-10#",
              smooth: true,
              type: "line",
              itemStyle: {
                normal: {
                  color: "#00bfff",
                  lineStyle: {
                    color: "#00bfff",
                    width: 2,
                  },
                },
              },
              data: this.cydata10,
            },
            {
              name: "-20#",
              smooth: true,
              type: "line",
              itemStyle: {
                normal: {
                  color: "#ffb6c1",
                  lineStyle: {
                    color: "#ffb6c1",
                    width: 2,
                  },
                },
              },
              data: this.cydata20,
              /* animationDuration: 2800,
            animationEasing: 'quadraticOut'*/
            },
          ],
        },
        true
      );
    },
    getXData() {
      return listXdata(this.queryParams).then((response) => {
        this.xdata = [];
        if (response.hasOwnProperty("rows")) {
          for (let i in response.rows) {
            this.xdata.push(response.rows[i].createdDate);
          }
        }
      });
    },

    getQyData92() {
      return listQydata92(this.queryParams).then((response) => {
        this.qydata92 = [];
        if (response.hasOwnProperty("rows")) {
          for (let i in response.rows) {
            let data = [];
            data.push(response.rows[i].createdDate);
            data.push(response.rows[i].amt);
            this.qydata92.push(data);
          }
        }
      });
    },

    getQydata95() {
      return listQydata95(this.queryParams).then((response) => {
        this.qydata95 = [];
        if (response.hasOwnProperty("rows")) {
          for (let i in response.rows) {
            let data = [];
            data.push(response.rows[i].createdDate);
            data.push(response.rows[i].amt);
            this.qydata95.push(data);
          }
        }
      });
    },

    getQydata98() {
      return listQydata98(this.queryParams).then((response) => {
        this.qydata98 = [];
        if (response.hasOwnProperty("rows")) {
          for (let i in response.rows) {
            let data = [];
            data.push(response.rows[i].createdDate);
            data.push(response.rows[i].amt);
            this.qydata98.push(data);
          }
        }
      });
    },

    getQydata0() {
      return listQydata0(this.queryParams).then((response) => {
        this.cydata0 = [];
        if (response.hasOwnProperty("rows")) {
          for (let i in response.rows) {
            let data = [];
            data.push(response.rows[i].createdDate);
            data.push(response.rows[i].amt);
            this.cydata0.push(data);
          }
        }
      });
    },

    getQydata10() {
      return listQydata10(this.queryParams).then((response) => {
        this.cydata10 = [];
        if (response.hasOwnProperty("rows")) {
          for (let i in response.rows) {
            let data = [];
            data.push(response.rows[i].createdDate);
            data.push(response.rows[i].amt);
            this.cydata10.push(data);
          }
        }
      });
    },

    getQydata20() {
      return listQydata20(this.queryParams).then((response) => {
        this.cydata20 = [];
        if (response.hasOwnProperty("rows")) {
          for (let i in response.rows) {
            let data = [];
            data.push(response.rows[i].createdDate);
            data.push(response.rows[i].amt);
            this.cydata20.push(data);
          }
        }
      });
    },

    //获取折线图用到的数据
    getDatas() {
      Promise.all([
        this.getXData(),
        this.getQyData92(),
        this.getQydata95(),
        this.getQydata98(),
        this.getQydata0(),
        this.getQydata10(),
        this.getQydata20(),
      ]).then((res) => {
        this.initChart();
      });
    },

    /** 查询优惠劵管理列表 */
    getList() {
      if (
        this.queryParams.stationId == null ||
        this.queryParams.stationId == ""
      ) {
        this.queryParams.stationId = this.$store.state.user.deptId;
      }
      listSum(this.queryParams).then((response) => {
        if (response.hasOwnProperty("data")) {
          this.form.zongAmt = response.data.amt;
          this.form.zongliters = response.data.orderLiters;
        }
      });
      listOilType(this.queryParams).then((response) => {
        if (response.hasOwnProperty("rows")) {
          for (let i in response.rows) {
            if (response.rows[i].oilType === "2") {
              this.form.qyamt = response.rows[i].amt;
            } else if (response.rows[i].oilType === "1") {
              this.form.cyamt = response.rows[i].amt;
            }
          }
        }
      });
      this.dayReportDetail();
    },
    dayReportDetail() {
      selectDayReportDetail(this.queryParams).then((response) => {
        this.dayReportList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    //本日的数据
    dayDataSource() {
      this.reset();
      this.dateRangeCreatedDate = null;
      this.queryParams.beginTime = this.getNowFormatDate(new Date());
      this.queryParams.endTime = this.getEndFormatDate(new Date());
      this.queryParams.stationId = this.$store.selectDeptId;
      if (
        this.queryParams.stationId == null ||
        this.queryParams.stationId == ""
      ) {
        this.queryParams.stationId = this.$store.state.user.deptId;
      }
      this.getList();
    },
    //昨天的数据
    yesDataSource() {
      this.reset();
      this.dateRangeCreatedDate = null;
      this.queryParams.beginTime = this.getFormatDate(new Date());
      this.queryParams.endTime = this.getNowFormatDate(new Date());
      this.queryParams.stationId = this.$store.selectDeptId;
      if (
        this.queryParams.stationId == null ||
        this.queryParams.stationId == ""
      ) {
        this.queryParams.stationId = this.$store.state.user.deptId;
      }
      this.getList();
    },
    //本周的数据
    workDataSource() {
      this.reset();
      this.dateRangeCreatedDate = null;
      this.queryParams.beginTime = this.getDates();
      this.queryParams.endTime = this.getEndFormatDate(new Date());
      this.queryParams.stationId = this.$store.selectDeptId;
      if (
        this.queryParams.stationId == null ||
        this.queryParams.stationId == ""
      ) {
        this.queryParams.stationId = this.$store.state.user.deptId;
      }
      //this.initChart();
      //this.getDatas();
      this.getList();
    },

    //本月数据
    monthDataSource() {
      this.reset();
      this.dateRangeCreatedDate = null;
      this.queryParams.beginTime = this.getMonthDate();
      this.queryParams.endTime = this.getEndFormatDate(new Date());
      this.queryParams.stationId = this.$store.selectDeptId;
      if (
        this.queryParams.stationId == null ||
        this.queryParams.stationId == ""
      ) {
        this.queryParams.stationId = this.$store.state.user.deptId;
      }
      //this.getDatas();
      this.getList();
    },

    //按照指定日期
    queryDataSource() {
      this.reset();
      if (this.dateRangeCreatedDate == null) {
        this.queryParams.stationId = this.$store.selectDeptId;
        this.queryParams.beginTime = null;
        this.queryParams.endTime = null;
        if (
          this.queryParams.stationId == null ||
          this.queryParams.stationId == ""
        ) {
          this.queryParams.stationId = this.$store.state.user.deptId;
        }
        //  this.getDatas();
        this.getList();
      } else {
        this.queryParams.beginTime = this.dateRangeCreatedDate[0];
        this.queryParams.endTime = this.dateRangeCreatedDate[1];
        this.queryParams.stationId = this.$store.selectDeptId;
        if (
          this.queryParams.stationId == null ||
          this.queryParams.stationId == ""
        ) {
          this.queryParams.stationId = this.$store.state.user.deptId;
        }
        // this.getDatas();
        this.getList();
      }
    },
    //今天
    getNowFormatDate(date) {
      let seperator1 = "-";
      let month = date.getMonth() + 1;
      let strDate = date.getDate();
      if (month >= 1 && month <= 9) {
        month = "0" + month;
      }
      if (strDate >= 0 && strDate <= 9) {
        strDate = "0" + strDate;
      }
      let currentdate1 =
        date.getFullYear() + seperator1 + month + seperator1 + strDate;
      return currentdate1;
    },
    //明天
    getEndFormatDate(myDate) {
      let date = myDate.getDate();
      date = date + 1;
      myDate.setDate(date);
      let seperator2 = "-";
      let month = myDate.getMonth() + 1;
      let strDate = myDate.getDate();
      if (month >= 1 && month <= 9) {
        month = "0" + month;
      }
      if (strDate >= 0 && strDate <= 9) {
        strDate = "0" + strDate;
      }
      let currentdate2 =
        myDate.getFullYear() + seperator2 + month + seperator2 + strDate;
      return currentdate2;
    },
    //昨天
    getFormatDate(myDate) {
      let date = myDate.getDate();
      date = date - 1;
      myDate.setDate(date);
      let seperator3 = "-";
      let month = myDate.getMonth() + 1;
      let strDate = myDate.getDate();
      if (month >= 1 && month <= 9) {
        month = "0" + month;
      }
      if (strDate >= 0 && strDate <= 9) {
        strDate = "0" + strDate;
      }
      let currentdate3 =
        myDate.getFullYear() + seperator3 + month + seperator3 + strDate;
      return currentdate3;
    },
    getDates() {
      var new_Date = new Date();
      var timesStamp = new_Date.getTime();
      var currenDay = new_Date.getDay();
      var dates = new Date(
        timesStamp + 24 * 60 * 60 * 1000 * (0 - ((currenDay + 6) % 7))
      )
        .toLocaleDateString()
        .replace(/[年月]/g, "-")
        .replace(/[日上下午]/g, "");
      let s = dates.replace(/-/g, "/");
      var dt = new Date(s);
      var m = dt.getMonth() + 1;
      var d = dt.getDate();
      m = m < 10 ? "0" + m : m;
      d = d < 10 ? "0" + d : d;
      dates = dt.getFullYear() + "-" + m + "-" + d;
      return dates;
    },
    //本月第一天
    getMonthDate() {
      let date = new Date();
      let seperator1 = "-";
      let month = date.getMonth() + 1;
      if (month >= 1 && month <= 9) {
        month = "0" + month;
      }
      let currentdate =
        date.getFullYear() + seperator1 + month + seperator1 + "01";
      return currentdate;
    },
    // 表单重置
    reset() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        createdDate: null,
        stationId: null,
        stationName: null,
        beginTime: null,
        endTime: null,
      };
      this.form = {
        zongAmt: 0,
        zongliters: 0,
        qyamt: 0,
        cyamt: 0,
      };
    },

    /** 查看详情按钮操作 */
    handleLook(row) {
      this.row = row;
      row.page = this.queryInfo.pageNum;
      row.limit = this.queryInfo.pageSize;
      this.getLookOrder(row);
    },
    getLookOrder(row) {
      const createdDate = this.row.createdDate;
      this.queryInfo.beginTime = createdDate.substring(0, 10) + " 00:00:00";
      this.queryInfo.endTime = createdDate.substring(0, 10) + " 23:59:59";
      this.queryInfo.status = "1";
      this.queryInfo.pageNum = row.page;
      this.queryInfo.pageSize = row.limit;
      this.queryInfo.orderType = "1";
      this.queryInfo.stationId = this.$store.selectDeptId;
      getDetails(this.queryInfo).then((response) => {
        this.dayReportDetailsList = response.rows;
        this.total1 = response.total;
        this.open = true;
        this.title = "日报详细信息";
      });
    },
    getTotal(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = "合计";
          return;
        }
        const values = data.map((item) => Number(item[column.property]));
        if (column.property === "orderLiters") {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
          sums[index] = sums[index].toFixed(2);
        } else if (column.property === "receivableAmt") {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
          sums[index] = sums[index].toFixed(2);
        } else if (column.property === "amt") {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
          sums[index] = sums[index].toFixed(2);
        } else if (column.property === "discountAmt") {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
          sums[index] = sums[index].toFixed(2);
        } else if (column.property === "discountCouponAmt") {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
          sums[index] = sums[index].toFixed(2);
        } else if (column.property === "menberAmt") {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
          sums[index] = sums[index].toFixed(2);
        } else if (column.property === "wxAmt") {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
          sums[index] = sums[index].toFixed(2);
        } else if (column.property === "zfbAmt") {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
          sums[index] = sums[index].toFixed(2);
        } else {
          sums[index] = "";
        }
      });
      return sums;
    },
  },
};
</script>
<style lang="scss" scoped>
.flex {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 270px;
  flex-direction: column;
}
.flex-qy {
  display: flex;
  align-items: center;
  justify-content: center;
}
.flex-qy-sx {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.panel-group {
  padding-left: 10px;
}

.flex-sr {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  flex-direction: column;
}
.sr-font {
  font-size: 20px;
  color: #f4a645;
}
</style>
